<template>
  <demo-content :title="title">
    <p></p>
    <canvas ref="canvasRef" width="600" height="250"></canvas>
  </demo-content>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { rect } from "./utils";

const title = "用 actTo 绘制圆角矩形";
// 指定组件上的属性
defineOptions({ title });

const canvasRef = ref<HTMLCanvasElement>();
onMounted(() => {
  const canvas = canvasRef.value!;
  const ctx = canvas.getContext("2d")!;
  const params: [string, string, number, number, number, number, number][] = [
    ["#0000", "skyblue", 20, 20, 560, 200, 0],
    ["blue", "yellow", 50, 40, 100, 100, 10],
    ["purple", "green", 170, 40, 100, 100, 20],
    ["red", "white", 290, 40, 100, 100, 30],
    ["white", "blue", 410, 40, 100, 100, 40],
  ];
  for (const [strokeStyle, fillStyle, x, y, w, h, cornerRadius] of params) {
    rect.draw(ctx, { x, y, w, h, strokeStyle, fillStyle, cornerRadius });
  }
  // rect.draw(ctx, {
  //   x: 20,
  //   y: 20,
  //   w: 560,
  //   h: 200,
  //   fillStyle: "deepskyblue",
  // });

  // rect.draw(ctx, {
  //   x: 50,
  //   y: 50,
  //   w: 100,
  //   h: 100,
  //   fillStyle: "yellow",
  //   strokeStyle: "blue",
  //   cornerRadius: 10,
  // });
});
</script>

<style src="./default.css" scoped></style>
